<template>
    <div class="question-container">
        <!-- 题目类型和编号 -->
        <div class="question-header">
            第<span class="question-number">{{ index + 1 }}</span>题（{{
                question.type === "多选" ? "不定项选择" : question.type
            }}）
        </div>

        <!-- 题目内容 v-html="question.context"-->
        <pre class="question-content" v-html="processedContent"></pre>

        <!-- 判断题选项 -->
        <div v-if="question.type === '判断'" class="judgement-options">
            <div class="judgement-option" :class="{ 'selected': data === true }" @click="panduan(true)">
                <!-- <svg class="icon">
                    <use xlink:href="#icon-dui" />
                </svg> -->
                <span class="option-letter">A.</span>
                正确
            </div>
            <div class="judgement-option" :class="{ 'selected': data === false }" @click="panduan(false)">
                <!-- <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-cuowu" />
                </svg> -->
                <span class="option-letter">B.</span>
                错误
            </div>
        </div>

        <!-- 单选题选项（水平排列） -->
        <div v-else-if="question.type === '单选'" class="horizontal-options">
            <div v-for="(optionText, idx) in option" :key="idx" class="option-item"
                :class="{ 'selected': data === ['A', 'B', 'C', 'D'][idx] }" @click="xuanze(['A', 'B', 'C', 'D'][idx])">
                <span class="option-letter">{{ ['A', 'B', 'C', 'D'][idx] }}.</span>
                <div class="option-content">
                    <img v-if="image(optionText)" :src="optionText" class="option-image" />
                    <div v-else class="option-text">{{ optionText }}</div>
                </div>
            </div>
        </div>

        <!-- 多选题选项（水平排列） -->
        <div v-else-if="question.type === '多选'" class="horizontal-options">
            <div v-for="(letter, idx) in ['A', 'B', 'C', 'D']" :key="letter" class="option-item"
                :class="{ 'selected': Array.isArray(data) && data.includes(letter) }" @click="xuanze(letter, true)">
                <span class="option-letter">{{ letter }}.</span>
                <div class="option-content">
                    <img v-if="image(option[idx])" :src="option[idx]" class="option-image" />
                    <div v-else class="option-text">{{ option[idx] }}</div>
                </div>
            </div>
        </div>

        <!-- 填空题 -->
        <div v-else-if="question.type === '填空'" class="fill-blank">
            <!-- <div class="blank-prompt">空白处填入：</div> -->
            <input v-model.lazy="data" class="blank-input" placeholder="" />
        </div>
    </div>
</template>

<script setup lang="ts">

import {
    computed,
    nextTick,
    onMounted,
    ref,
    toRefs,
    watch,
} from "vue";

import Studycodemodel from "../mysql_interface/studycodemodel";
import questionhtml from "../util/htmlstring";
import { isImage } from "../util/RegExp";

type P = { question: Studycodemodel.Imatchquestion, index: number, }
const p = defineProps<P>()
const { question } = toRefs(p);

// 在原有script基础上添加内容处理函数
const processedContent = computed(() => {
    if (!question.value.context) return "";

    // 处理P标签和空白
    let content = question.value.context
        .replace(/<p\b[^>]*>/gi, '<div class="content-paragraph">')  // 处理所有P标签变体
        .replace(/<\/p>/gi, '</div>')
        // .replace(/(\r\n|\n|\r)/gm, ' ')  // 替换所有换行符为空格
        // .replace(/\s+/g, ' ')  // 合并所有空白字符
        .replace(/<div class="content-paragraph">\s*<\/div>/g, '') // 移除空段落
        .replace(/(<[^>]+>)\s+/g, '$1')  // 移除标签后的空格
        .replace(/\s+(<\/[^>]+>)/g, '$1') // 移除标签前的空格
        .trim()

    return content;
});

const option = computed(() => {
    if (question.value.answer) {
        return question.value.answer.options || [];
    }
    return [];
});
const data = ref<boolean | string | string[]>();
onMounted(() => { start(); });
function start() {
    nextTick(() => {
        questionhtml()
    });
}
watch(() => question.value, () => { start(); });

function image(str: string) {
    return isImage.test(str);
}
function panduan(t: boolean) {
    data.value = t;
}

function xuanze(t: string, type?: boolean) {
    if (type) {
        // 多选
        if (!Array.isArray(data.value)) {
            data.value = [];
        }
        const f = data.value.findIndex((v) => v === t);

        if (f !== -1) {
            data.value.splice(f, 1);
        } else {
            if (data.value.length >= 4) {
                data.value.splice(0, 1);
            }
            data.value.push(t);
        }
    } else {
        data.value = t;
    }
}
</script>

<style scoped>
/* 基础容器样式 */
.question-container {
    padding: 0 50px;
    border-radius: 8px;
    background: #fff;

    --gap: 10px;
}

/* 题目头部样式 */
.question-header {
    font-weight: bold;
    margin-bottom: var(--gap);
    font-size: 16px;
    color: #333;
}

.question-number {
    color: var(--color-cheng);
    margin: 0 3px;
}

/* 题目内容样式 */
.question-content {
    margin-bottom: var(--gap);
    line-height: 1.6;
    font-size: 14px;

    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
}

.content-paragraph {
    /* margin-bottom: 12px; */
    /* line-height: 1.6; */
}


/* 水平排列的选项 */
.horizontal-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

/* 核心控制参数 */
.option-item {
    /* 确保至少2列 300px */
    min-width: max(0, calc(25% - var(--gap)));
    /* 确保最多2列时换行 calc(50% - var(--gap)) */
    max-width: 50%;
    /* 优先25%宽度（4个/行） */
    flex: 1 1 calc(25% - var(--gap));

    /* 视觉样式 */
    display: flex;
    padding: var(--gap);
    border-radius: 8px;
    box-sizing: border-box;
}

.option-item:hover {
    background-color: #f5f5f5;
}

.option-item.selected {
    background-color: var(--color-cheng);
    color: white;
}

.option-letter {
    font-weight: bold;
    margin-bottom: 5px;
    margin-right: 5px;
}

.option-content {
    /* 关键：允许文本换行 */
    min-width: 0;
}

.option-text {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.option-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 判断题样式 */
.judgement-options {
    display: flex;
    gap: 15px;
    margin-top: var(--gap);
}

.judgement-option {
    /* flex: 1; */
    width: 20%;
    padding: var(--gap);
    /* text-align: center; */
    /* border: 1px solid #ddd; */
    /* border-radius: 6px; */
    cursor: pointer;
    transition: all 0.2s;
}

.judgement-option:hover {
    background-color: #f5f5f5;
}

.judgement-option.selected {
    background-color: var(--color-cheng);
    color: white;
    border-color: var(--color-cheng);
}

.judgement-option .icon {
    margin-right: 5px;
}

/* 填空题样式 */
.fill-blank {
    /* margin-top: 15px; */
    display: flex;
    align-items: center;
}

.blank-prompt {
    margin-bottom: 8px;
    color: #666;
}

.blank-input {
    flex: 1;
    /* width: 100%; */
    padding: 8px 12px;
    border-radius: 4px;
    /* border: 1px solid #ddd; */
    border: none;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

/* 响应式调整 */
@media (max-width: 800px) {
    .option-item {
        /* 中等屏幕：2个一行 */
        flex-basis: calc(50% - var(--gap));
    }
}

@media (max-width: 600px) {
    .option-item {
        /* 小屏幕：1个一行 */
        flex-basis: 100%;
    }
}
</style>